<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <script src="../../js/vue.min.js"></script>
	</head>
	<body>
		<!--
		作用：绑定事件
		语法：v-on:click="say" or v-on:click="say('参数', $event)"
		简写：@click="say"
		说明：绑定的事件从methods中获取
		
		Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如我们上面使用的：event.preventDefault() 和event.stopPropagation()。
		​ 这样写有些麻烦,Vue.js提供了通过由点(.)表示的指令后缀来调用修饰符。
		.stop     // 停止触发，阻止冒泡修饰符 
		.prevent  // 阻止事件发生，阻止事件默认行为
		.capture  // 捕获 
		.self     // 只点自己身上才运行
		.once     // 只执行一次
		【需求】：1.在表单中，点击“提交”按钮，阻止执行（.prevent）；2.在div里面放置超链接，点击url，阻止冒泡（.stop）
		-->
		<div id="app">
		    <!--1.在表单中，点击“提交”按钮，阻止执行（.prevent）-->
		    <form action="http://www.sohu.com" method="post" @click.prevent>
		        <input type="submit"/>
		    </form>
		​
		    <!--2.在div里面放置超链接，点击url，阻止冒泡（.stop）-->
		    <div @click="fun01">
				<!--就是不执行外面的事件-->
		        <a href="http://www.baidu.com" @click.stop>百度</a>
		    </div>
		</div>
		​
		<script>
		    new Vue({
		        el: '#app',
		        data: {},
		        methods: {
		            fun01:function () {
		                alert('百度');
		            }
		        }
		    });
		</script>
	</body>
</html>
